<template>
    <el-drawer title="详细信息" v-model="Visible" size="80%" :before-close="closeDrawer">
        <el-form :inline="true" :model="item" class="form-inline">
            <el-form-item label="合作编号">
                <el-select v-model="item.zhognjie" clearable filterable placeholder="选择联系人" style="width: 220px;">
                    <el-option v-for="item in EnumB" :key="item.phone" :label="item.name" :value="item.phone" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户姓名">
                <el-input v-model="item.name" required></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="item.gender" required style="width: 200px;">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="转接手机号">
                <el-input v-model="item.phone" required></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="item.leibie" required style="width: 200px;">
                    <el-option label="协商" value="协商"></el-option>
                    <el-option label="解冻" value="解冻"></el-option>
                    <el-option label="托管" value="托管"></el-option>
                    <el-option label="维护" value="维护"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="平台">
                <el-select v-model="item.selectedEnumA" multiple clearable filterable placeholder="选择信用卡"
                    style="width: 220px;">
                    <el-option v-for="item in EnumA" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="呼叫转移手机号">
                <el-select v-model="item.selectedEnumB" clearable filterable placeholder="选择联系人" style="width: 220px;">
                    <el-option v-for="item in EnumB" :key="item.phone" :label="item.name" :value="item.phone" />
                </el-select>
            </el-form-item>
            <el-form-item label="接单日期">
                <el-date-picker v-model="item.riqi" type="date" placeholder="接单日期" />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="item.jieshuriqi" type="date" placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="做单员工账号">
                <el-select v-model="item.zhanghao" clearable filterable placeholder="选择联系人" style="width: 220px;">
                    <el-option v-for="item in EnumB" :key="item.phone" :label="item.name" :value="item.phone" />
                </el-select>
            </el-form-item>
            <el-form-item label="总收款">
                <el-input v-model="item.zongshoukuan" required></el-input>
            </el-form-item>
            <el-form-item label="已收">
                <el-input v-model="item.yishou" required></el-input>
            </el-form-item>
            <el-form-item label="尾款">
                <el-input v-model="item.weikuan" required></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="item.beizhu" required></el-input>
            </el-form-item>
        </el-form>
        <div class="drawer-footer">
            <el-button @click="closeDrawer">取消</el-button>
            <el-button type="primary" @click="saveItem">保存</el-button>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref, defineEmits, watch, onMounted } from 'vue';

const props = defineProps({
    drawerVisible: {
        type: Boolean,
        required: true,
    },
    currentItem: {
        type: Object,
        required: true,
    },
    EnumA: {
        type: Array,
        required: true,
    },
    EnumB: {
        type: Array,
        required: true,
    },
});


const Visible = ref(true);
const item = ref({});

const emit = defineEmits(['close', 'save']);
onMounted(() => {
    item.value = props.currentItem
});
watch(() => props.drawerVisible, (newVal) => {
    if (!newVal) {
        resetForm();
    }
});

function resetForm() {
    // 重置表单（如果需要）
}
const addItem = () => {
    item.value.arr.push({ date: '2023-2-1', type: '', selectedEnumA: '', selectedEnumB: '', remarks: '' });
};

const removeItem = (index) => {
    item.value.arr.splice(index, 1);
};
function closeDrawer() {
    emit('close');
}

function saveItem() {
    emit('save', { ...props.item });
}
</script>

<style scoped>
.drawer-footer {
    display: flex;
    justify-content: flex-end;
}

.item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.select,
.input {
    margin-right: 10px;
    width: 200px;
    /* 调整宽度以适应布局 */
}

.delete-button {
    margin-left: 10px;
}

.add-button {
    margin-bottom: 10px;
}
</style>